<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/9
  Time: 18:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="JS/jquery-1.8.3.js"></script>
    <script src="CSS/bootstrap.min.js"></script>
    <link rel="stylesheet" href="CSS/bootstrap.css">
</head>

<style type="text/css">

    #result {
        color: red;
    }

    #context {
        position: absolute;
        width: 457px;
        margin-top: 0;
        z-index: 100;
        background-color: #cccccc;
        border-width: 2px;
    }

    form {
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
    }

    .choose {
        background-color: deepskyblue;
        color: white;
        cursor: pointer;
    }

    .group input {
        width: 50%;
        float: left;
    }

    .group button {
        float: left;
    }

    .group {
        overflow: hidden;
    }

    .form-group {
        float: left;
    }

    .form-group:last-child {
        width: 800px;
    }

    table {
        text-align: center;
    }

</style>

<body>

<%
    int num = 0;
%>

<form role="form" action="FuzzySelectTopicByKeywordServlet" method="post">

    <div class="form-group">
        <label for="exampleInput1">请输入主贴标题</label>
        <div class="group">
            <input type="text" class="form-control" name="serch" id="exampleInput1" value="${requestScope.keyword}"
                   placeholder="请输入查询的内容">
            <button type="submit" class="btn btn-info">搜索</button>
        </div>
        <div id="context"></div>
    </div>

</form>


<table class="table table-hover" id="table">
    <tr>
        <td>编号</td>
        <td>帖子标题</td>
        <td>帖子内容</td>
        <td>所属板块</td>
        <td>发帖人</td>
        <td>发帖时间</td>
        <td>操作</td>
    </tr>
</table>
<table class="table table-hover">
    <tr>
        <td colspan="7">
            <a class="btn btn-default" id="firstPage" href="javascript:void(0)">首页</a>
            <a class="btn btn-default" id="prevPage" href="javascript:void(0)"">上一页</a>
            <a class="btn btn-default" id="nextPage" href="javascript:void(0)">下一页</a>
            <a class="btn btn-default" id="lastPage" href="javascript:void(0)">尾页</a>
            <a href="javascript:history.go(-1)" class="btn btn-default">返回上一级</a>
        </td>
    </tr>
</table>
<div id="result">
    ${requestScope.result}
</div>


</body>

<script>
    var acurrPage; //定义当前页索引
    var totalPage;
    var num=0;

    paging = function(currPage){  //定义分页函数
        $.ajax({
            type: "post",
            url: "FuzzySelectTopicByKeywordCurrPageServlet",
            dataType: "JSON",
            data: {keyword: $("#exampleInput1").val(),currPage:currPage||1},
            success: function (data) {
                totalPage = data.totalPage;
                acurrPage = data.currPageIndex;
                $(".add").remove();
                $.each(data.list, function (index, obj) {
                    num++;
                    var $newTr = "<tr class='add'><td>"+num+"</td><td>"+obj.title+"</td><td>"+obj.context+"</td><td>"+obj.blank.bName+"</td><td>"+obj.user.uName+"</td><td>"+obj.pTime+"</td><td>\n" +
                        "                <a href=\"SelectReplyByTopic?bId="+obj.blank.bId+"&title="+obj.title+"\">查看回帖</a>&nbsp;\n" +
                        "                <a href=\"getTopicInfoForReplyServlet?pId="+obj.pId+"&title="+obj.title+"&context="+obj.context+"&pTime="+obj.pTime+"\">回复该贴</a>\n" +
                        "            </td></tr>";
                    $("#table").append($newTr);
                });
            }
        });
    }


    $(".btn-default").on("click", function () {
        var $contxt = $("#exampleInput1").val();
        if ($contxt != "") {
            var $id = $(this).attr("id");
            if ($id == 'firstPage') {
                num = 0;
                acurrPage = 1;
                paging(acurrPage);
            }else if ($id == 'prevPage'){
                num = 0;
                acurrPage--;
                paging(acurrPage);
            }else if ($id == 'nextPage'){
                num = 0;
                acurrPage++;
                paging(acurrPage);
            } else if ($id == 'lastPage') {
                num = 0;
                acurrPage = totalPage;
                paging(acurrPage);
            }
        }

    })


    $(function () {
        paging(acurrPage);  //调用查询函数
    })


</script>

</html>
